<template>
  <div id="app">
    <div class="points-section">
      <div class="points">1000</div>
      <div class="points-description" @click="onClickSignIn">签到获取积分 ></div>
    </div>
    <div class="button-group">
      <div class="button">积分商城</div>
      <div class="button">积分明细</div>
      <div class="button">积分订单</div>
      <div class="button">积分活动</div>
    </div>
    <div class="exchange-section">
      <div class="exchange-title">虚拟兑换</div>
      <div class="exchange-subtitle">热门虚拟权益服务</div>
      <div class="exchange-category">
        <div class="category-title">人气兑换 ></div>
        <div class="product-list">
          <div class="product-item">
            <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Parking Coupon">
            <div class="product-details">
              <span>XXXX停车场</span>
              <span>停车券抵用券</span>
              <span>6000分 6000分</span>
            </div>
          </div>
          <div class="product-item">
            <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Parking Coupon">
            <div class="product-details">
              <span>XXXX停车场</span>
              <span>停车券抵用券</span>
              <span>6000分 6000分</span>
            </div>
          </div>
          <div class="product-item">
            <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Parking Coupon">
            <div class="product-details">
              <span>XXXX停车场</span>
              <span>停车券抵用券</span>
              <span>6000分 6000分</span>
            </div>
          </div>
        </div>
      </div>
      <div class="exchange-category">
        <div class="category-title">生活出行 ></div>
        <div class="product-list">
          <div class="product-item">
            <img src="https://img2.baidu.com/it/u=325457460,3049267200&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800" alt="Bike Card">
            <div class="product-details">
              <span>小黄车 城市自由骑行月卡</span>
              <span>6000分</span>
            </div>
          </div>
          <div class="product-item">
            <img src="https://pic.rmb.bdstatic.com/bjh/cms/231229/909c39acd31706548ce34c1f4a048934_1703819359.8877_707.jpeg" alt="Car Service">
            <div class="product-details">
              <span>嘀嘀 专车出行85折抵用券X5</span>
              <span>6000分</span>
            </div>
          </div>
          <div class="product-item">
            <img src="https://img2.baidu.com/it/u=325457460,3049267200&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800" alt="Bike Card">
            <div class="product-details">
              <span>小黄车 城市自由骑行月卡</span>
              <span>6000分</span>
            </div>
          </div>
        </div>
      </div>
      <div class="more-exchange">更多积分兑换 ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
methods: {
    onClickLeft() {
      this.$router.push('/wode')
    },
  onClickSignIn(){
      this.$router.push('/points')
  }
}
};

</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.time {
  font-size: 12px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
.camera {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: lightgray;
}
.points-section {
  width: 100%;
  background-color: #007AFF;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
}
.points {
  font-size: 30px;
}
.points-description {
  font-size: 14px;
  margin-top: 10px;
}
.button-group {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin: 20px;
}
.button {
  background-color: #007AFF;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
}
.exchange-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exchange-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.exchange-subtitle {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.exchange-category {
  width: 100%;
  margin-bottom: 20px;
}
.category-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 20px;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}
.product-item {
  width: 30%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.product-details {
  text-align: center;
}
.product-details span {
  display: block;
  margin-bottom: 5px;
}
.more-exchange {
  text-align: right;
  color: gray;
  cursor: pointer;
  margin-right: 20px;
}
</style>
